<script>
export default {
  name: "others_component",
 activated() {
   console.log('activated')
   this.timer = setInterval(() => {
     console.log('@')
     //透明度变换 从0慢慢变成1 再从1慢慢变成0 循环往复
     this.opacity -= 0.01
     if (this.opacity <= 0) {
       this.opacity = 1
     }
   }, 10)
 },
  deactivated() {
    console.log('deactivated')
   clearInterval(this.timer)
 },
  data() {
    return {
      opacity: 1,
      timer: null,
    }
  },
}
</script>

<template>
  <div>
    <ul>
      <li :style="{opacity}">hello,world</li>
      <li>others1<input type="text" class="input-group-text"></li>
      <li>others2 <input type="text" class="input-group-text"></li>
      <li>others3<input type="text" class="input-group-text"></li>
      <li>others4<input type="text" class="input-group-text"></li>
    </ul>
  </div>
</template>

<style scoped>

</style>